<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始设置 - 数据库</title>
    <!-- Material Design fonts -->
    <!--<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">-->
    <!-- Admin LTE-->
    <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
    <!--jquery-->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Bootstrap Material Design -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-material-design.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/ripples.min.css">
    <link rel="stylesheet" href="/static/css/skins/skin-blue.min.css">

    <script src="/static/js/material.min.js"></script>
    <script src="/static/js/ripples.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script>
      var AdminLTEOptions = {
        //Enable sidebar expand on hover effect for sidebar mini
        //This option is forced to true if both the fixed layout and sidebar mini
        //are used together
        sidebarExpandOnHover: true,
        //BoxRefresh Plugin
        enableBoxRefresh: true,
        //Bootstrap.js tooltip
        enableBSToppltip: true
      };

      $.material.init();
    </script>

    <style>
        #reg-box-msg{
            padding-bottom:0;
        }

        div.form-group{
            margin-top: 0 !important;
        }

        [v-cloak]{
            display: none;
        }
        div.login-box{
            width: 400px;
        }

        label{
            color:black !important;
        }
    </style>

    <script>
        Vue.config.delimiters = ['${','}'];
        $(document).ready(function () {
            var vm = new Vue({
                el :"#database_env",
                data : {
                    db_type_mysql: false,
                    connection_result : "",
                    test_btn_enable: false
                },
                computed:{
                    "db_type_mysql": function () {
                        return (this.db_type == "mysql")
                    },
                    "test_btn_enable": function () {
                        return !!(this.mysql_password.length > 0 &&
                        this.mysql_username.length > 0);
                    }
                },
                methods:{
                    "test_connection": function (e) {
                        var self = this;
                        var payloads = {
                            "mysql_username" : this.mysql_username,
                            "mysql_password" : this.mysql_password
                        };
                        $.post("/startup/test_mysql_connection",payloads, function (data) {
                            try{
                                var d = JSON.parse(data);
                                if(d.info){
                                    self.connection_result = "连接成功";
                                }else{
                                    self.connection_result = "连接失败";
                                }
                            }catch (e){
                                self.connection_result = "未知错误";
                            }
                        })
                    }
                }
            })
        });
    </script>
</head>

<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <b>Obsidian</b> Panel
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg" id="reg-box-msg">
        <b>STEP 3</b>: 数据库环境设置
    </p>
      <hr>

      <div class="form-group has-feedback" style="display: {{ g_error_hidden }};">
          <div class="error-msg alert alert-danger fade in">数据库密码错误！</div>
      </div>
    <form action="/startup/finish" method="post" id="database_env">
        <div class="form-group">
            <p>请选择数据库环境：</p>
            <div class="radio"><label>
                <input type="radio" name="db_env" value="sqlite" checked v-model="db_type">
                <span class="circle"></span><span class="check"></span>
                SQLite (推荐)
            </label></div>

            <div class="radio"><label>
                <input type="radio" name="db_env" value="mysql" v-model="db_type">
                <span class="circle"></span><span class="check"></span>
                MySQL
            </label></div>
        </div>

        <div id="mysql-account" style="margin-left:3em;" v-show="db_type_mysql">
            <p><cite>请输入MySQL数据库的用户名和密码：</cite></p>
            <div class="form-group has-feedback">
                <input id="username" type="text" class="form-control" placeholder="用户名" v-model="mysql_username" name="mysql_username">
                <span class="fa fa-user form-control-feedback"></span>
            </div>

            <div class="form-group has-feedback">
                <input id="pa" type="password" class="form-control" placeholder="密码" v-model="mysql_password" name="mysql_password">
                <span class="fa fa-lock form-control-feedback"></span>
            </div>

            <div class="row">
                <div class="col-xs-8">
                    <button class="btn btn-raised btn-default btn-sm" type="button" v-on:click="test_connection" :disabled="!test_btn_enable">测试</button>
                    &nbsp;&nbsp;
                    <span style="color:red;">${ connection_result }</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
            </div>
            <!-- /.col -->
            <div class="col-xs-8" style="text-align:right;">
                <button type="submit" class="btn btn-raised btn-info">完成</button>
            </div>
        <!-- /.col -->
        </div>
    </form>
  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
</html>
